<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" type="text/css"
	href="bootstrap-3.3.7/css/bootstrap.min.css">
<link rel="stylesheet"
	href="bootstrap-table-1.11.1/bootstrap-table.min.css">
<script type="text/javascript" src="jq/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="bootstrap-table-1.11.1/bootstrap-table.min.js"></script>
<script src="bootstrap-table-1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="bootstrap-table-1.11.1/extensions/export/tableExport.min.js"></script>
<script src="bootstrap-table-1.11.1/extensions/export/bootstrap-table-export.js"></script>

</head>
<body>
	<div class="container ">
		<div class="row">
			<div class="col-md-12">
				<table id="tb-cpu">
				
				</table>
			</div>
		</div>
	</div>
	<div id="toolbar">
            <select class="form-control">
                <option value="">Export Basic</option>
                <option value="all">Export All</option>
                <option value="selected">Export Selected</option>
            </select>
	</div>
	
	<table></table>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#tb-cpu").bootstrapTable({
				 	url: './cpu/list',        			//请求后台的URL（*）
	                //method: 'post',                      //请求方式（*）
	                toolbar: '#toolbar',                //工具按钮用哪个容器
	                showExport:true,
	                exportDataType:"selected",
	                striped: true,                      //是否显示行间隔色
	               // cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
	                pagination: true,                   //是否显示分页（*）
	                sortable: false,                     //是否启用排序
	                sortOrder: "asc",                   //排序方式
	                queryParams: queryParams,			//传递参数（*）
	               	sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
	                pageNumber:1,                       //初始化加载第一页，默认第一页
	                pageSize: 25,                       //每页的记录行数（*）
	                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
	                search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
	                strictSearch: true,
	                showRefresh: true,                  //是否显示刷新按钮
	                showColumns: true,                  //是否显示所有的列
	                showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
	                clickToSelect: true,                //是否启用点击选中行
	                height: 460,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
	                uniqueId: "xxzjbh",                 //每一行的唯一标识，一般为主键列
	                cardView: false,                    //是否显示详细视图
	                detailView: false,                   //是否显示父子表
	                columns: [{
	                	checkbox: true
	                },{
	                    field: 'xxzjbh',
	                    title: '编号'
	                }, {
	                    field: 'cpu_mc',
	                    title: '名称'
	                }, {
	                    field: 'cpu_cj',
	                    title: '厂家'
	                }, {
	                    field: 'cpu_jg',
	                    title: '价格/元'
	                }, {
	                    field: 'cpu_xn',
	                    title: '性能'
	                }]
	            });
			
		});
		function queryParams(params){
			var temp={	
					 pageSize: params.limit,   //页面大小
			         pageNumber: params.offset  //页码		
			}
			return temp	
		}
		
	</script>
</body>
</html>